<template>
  <div class="user-info-form asset-info-form">
    <el-form v-loading="loading" label-width="150px" :model="videoInfoForm" :rules="videoInfoFormRules" ref="videoInfoForm" @submit.native.prevent>
      <el-form-item label="配置名称：" prop="authName">
        <el-input
          v-model="videoInfoForm.authName"
          clearable>
        </el-input>
      </el-form-item>
      <el-form-item label="userId：" prop='userId'>
        <el-input
          v-model="videoInfoForm.userId"
          clearable>
        </el-input>
      </el-form-item>
      <el-form-item label="电话号码：" prop='phoneNumber'>
        <el-input
          v-model="videoInfoForm.phoneNumber"
          clearable>
        </el-input>
      </el-form-item>
      <el-form-item label="设备类型：" prop='equiptType'>
        <el-select  v-model="videoInfoForm.equiptType">
          <el-option
            v-for="item in deviceTypeList"
            :key="item.dictKey"
            :label="item.dictValue"
            :value="item.dictKey">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="appKey：" prop='appKey'>
        <el-input
          v-model="videoInfoForm.appKey"
          clearable>
        </el-input>
      </el-form-item>
      <el-form-item label="secretKey：" prop='secretKey'>
        <el-input
          v-model="videoInfoForm.secretKey"
          clearable>
        </el-input>
      </el-form-item>
      <el-form-item label="备注：" prop='remarks'>
        <el-input
          v-model="videoInfoForm.remarks"
          clearable>
        </el-input>
      </el-form-item>
      <el-form-item label-width="0" class="verifyidentity-button">
        <el-button @click.stop="closeFun(false)" round>取消</el-button>
        <el-button type="primary" @click="saveGridInfo('videoInfoForm')" round>保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getDictByCode } from '@/api/dic'
import { updateAuth } from '@/api/sysConfig'
export default {
    name: 'videoConfigInfo',
    // 引入子组件
    components: {

    },
    props: {
      videoInfo: {
        type: Object
      },
      closeFun: {
        type: Function,
        required: true
      },
      orgId:{
        type: Number
      }
    },
    data(){
      return {
        loading: false,
        deviceTypeList:[],
        shapeTypeList:[],
        positionTypeList:[],
        // 表单数据
        videoInfoForm: {
          authName:'',
          userId: '',
          phoneNumber: '',
          id: '',
          appKey: "",
          secretKey: "",
          remarks: "",
          equiptType: '',
          equiptTypeName: ''
        },
        // 表单校验
        videoInfoFormRules: {
          authName: [
            { required: true, message: '请输入配置名称', trigger: 'blur' }
          ],
          userId: [
            { required: true, message: '请输入userId', trigger: 'blur' }
          ],
          phoneNumber: [
            { required: true, message: '请输入电话号码', trigger: 'blur' }
          ],
          appKey: [
            { required: true, message: '请输入appKey', trigger: 'blur' }
          ],
          secretKey: [
            { required: true, message: '请输入secretKey', trigger: 'blur' }
          ],
          remarks: [
            { required: true, message: '请输入备注', trigger: 'blur' }
          ],
          equiptType: [
            { required: true, message: '请选择设备类型', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      let that = this
      // 获取设备类型
      getDictByCode({
        code: 33
      }).then(res => {
        if(res.status = 200) {
          that.deviceTypeList = res.data.dictValueObj
          if(that.videoInfo.id ==null && that.deviceTypeList.length>0){
              that.videoInfoForm.equiptType = that.deviceTypeList[0].dictKey
          }
        }
      })

      // 如果有历史值，设置回显
      if(that.videoInfo.id) {
        that.videoInfoForm.appKey = that.videoInfo.appKey
        that.videoInfoForm.equiptType =  that.videoInfo.equiptType + ""
        that.videoInfoForm.id = that.videoInfo.id
        that.videoInfoForm.organizationId = that.videoInfo.organizationId
        that.videoInfoForm.phoneNumber = that.videoInfo.phoneNumber
        that.videoInfoForm.remarks = that.videoInfo.remarks
        that.videoInfoForm.secretKey = that.videoInfo.secretKey
        that.videoInfoForm.userId = that.videoInfo.userId
        that.videoInfoForm.authName = that.videoInfo.authName||''
      }else{
        that.videoInfoForm.organizationId = that.orgId
      }
    },
    methods: {
      // 保存
      saveGridInfo(formName) {
        // 阻止事件冒泡
        event.stopPropagation()
        let that = this
        let type = 1
        let parames = {}
        // 校验表单
        that.$refs[formName].validate((valid) => {
          if(valid) {
            var parames = {
              videoAppKey : that.videoInfoForm.appKey,
              equiptType : that.videoInfoForm.equiptType,
              organizationId: that.videoInfoForm.organizationId,
              phoneNumber: that.videoInfoForm.phoneNumber,
              remarks: that.videoInfoForm.remarks,
              videoSecretKey: that.videoInfoForm.secretKey,
              userId: that.videoInfoForm.userId,
              id: that.videoInfo.id,
              authName: that.videoInfoForm.authName
            }

            if(parames.id == null || parames.id == "") {
               parames.id = 0
            }
            // 调用保存接口
            updateAuth(parames).then(res => {
              if(res.status === 200) {
                that.$message({
                  message: '保存成功！',
                  type: 'success'
                })
                // 关闭弹框
                that.closeFun(true)
              } else {
                that.$message({
                  message: res.info,
                  type: 'warning'
                })
              }
            })
          } else {
              return false
          }
        })
      }
    }
  }
</script>
